<template>
  <section class="confirm">
    <my-header :backParam="this.detailObj"></my-header>
    <h1>信息确认</h1>
    <List :detail="detailObj">
      <div slot="button" class="button-list">
        <!--        <button class="cancel" @click="handleCancel">撤销</button>-->
        <button class="confirm" @click="handleConfirmApply">确认</button>
      </div>
    </List>
  </section>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import MyHeader from '@/components/MyHeader.vue'
import List from '@/components/List.vue'
import {
  getApplyDetail,
  cancelApply,
  confirmApply,
  setCreateRawTokenRevokeTx,
  setSendRawTransaction,
} from '@/api/api'
import { ConfirmForm } from '@/types/form'
import { signTx } from '@33cn/wallet-api'

@Component({
  components: {
    MyHeader,
    List,
  },
})
export default class Confirm extends Vue {
  // 引用
  private getApplyDetail = getApplyDetail
  private confirmApply = confirmApply
  private cancelApply = cancelApply
  private setCreateRawTokenRevokeTx: any = setCreateRawTokenRevokeTx
  private Chain33SendRawTransaction: any = setSendRawTransaction
  private signTx = signTx
  // 定义
  private detailObj: ConfirmForm = new ConfirmForm()
  private routerTostatus: any = (this as any).routerTostatus
  private sendParam: any = {
    id: '',
    revoke_tx: '',
    revoke_send_transaction: '',
  }

  public beforeMount() {
    const id = String(this.$route.query.id)
    // 查找详情 设置手续费
    this.getApplyDetail({ id }).then((res: any) => {
      Object.assign(this.detailObj, res)
      this.detailObj.issue_charge = res.charge
    })
  }

  public handleCancel() {
    this.$dialog
      .confirm({
        title: '提示',
        message: '撤销需要扣除0.01燃料费，确认撤销吗？',
      })
      .then(() => {
        this.handleCancelApply()
      })
      .catch(() => {
        return
      })
  }

  // 取消
  public handleCancelApply() {
    if (!this.detailObj.owner && !this.detailObj.symbol && this.detailObj.id) {
      this.$notify('缺少地址或者简称')
    }
    // 弹出确认框
    this.sendParam.id = this.detailObj.id
    this.setCreateRawTokenRevokeTx(this.detailObj)
      .then((hash: string) => {
        return Promise.resolve(hash)
      })
      .then((hash: string) => {
        // APP签名
        return this.signTx(hash, '', this.detailObj.owner).then((sign: any) => {
          this.sendParam.revoke_tx = sign
        })
      })
      .then(() => {
        // 发送交易
        return this.Chain33SendRawTransaction(this.sendParam.revoke_tx).then(
          (transactionHash: any) => {
            this.sendParam.revoke_send_transaction = transactionHash
          },
        )
      })
      .then(() => {
        // 后台记录
        return this.cancelApply(this.sendParam)
      })
      .then(() => {
        // 查询详情
        return this.getApplyDetail({ id: this.detailObj.id }).then(
          (res: any) => {
            this.routerTostatus(res.status, this.detailObj.id)
          },
        )
      })
      .catch((error: any) => {
        if (error.msg) {
          this.$notify(error.msg)
        } else {
          this.$notify(error)
        }
      })
  }

  // 确认
  public handleConfirmApply() {
    this.confirmApply({ id: this.detailObj.id })
      .then((res: any) => {})
      .then(() => {
        return this.getApplyDetail({ id: this.detailObj.id }).then(
          (res: any) => {
            this.routerTostatus(res.status, this.detailObj.id)
          },
        )
      })
      .catch((error: any) => {
        this.$notify(error.msg)
      })
  }
}
</script>

<style scoped lang="scss">
h1 {
  font-size: 30px;
  margin: 40px 0 40px 0;
  text-align: center;
}

.button-list {
  display: flex;
  justify-content: center;
  width: 100%;

  .cancel {
    background-color: #5e6377;
  }

  .confirm {
    background-color: #7190ff;
  }
}
</style>